<template>
  <div class="photo-album">
    
      <div class="ivu-card ivu-card-bordered photo-album-header">
        <div class="left">
          <div class="h3">{{photoAlbum.title}}</div>
          <div>
            <p>
              所属分类：{{returnClassify(photoAlbum.classify)}}
            </p>
            <p>
              {{photoAlbum.content}}
            </p>
          </div>
        </div>
        <div class="right" style="margin-top:20px;">
           <Button type="primary" @click="modal=true">管理</Button>
            <InsertPhotoArr @returnimgarr="returnimgarr">
              <Button type="primary">添加图片</Button>
            </InsertPhotoArr>           
        </div>
        <div class="clear"></div>
      </div>
      <Affix>
    </Affix>

    <Modal
      title="Title"
      v-model="modal"
      :styles="{top: '50px'}"
      @on-ok="changePhoto">
      <p style="margin-top: 1rem;">标题：</p>
      <p ><Input v-model="photoAlbum.title"></Input></p>
      <p style="margin-top: 1rem;">内容</p>
      <p><Input v-model="photoAlbum.content" type="textarea" ></Input></p>
      <p style="margin-top: 1rem;">
        <Input v-model="photoAlbum.titleimg" placeholder="选择或输入图片连接">
          <InsertPhoto  slot="append" @returnimg="returnimg"></InsertPhoto>
        </Input>
      </p>
      <p style="margin-top: 1rem;">
        <i-select v-model="photoAlbum.classify" class="add-images-from" >
          <Option v-for="item in imgClassify" :value="item.id" :key="item.id">{{ item.title }}</Option>
        </i-select>
      </p>
    </Modal>
    
    <div  style="height:800px;width:1080px; margin:0 auto;" >
    <Waterfall :gutterWidth="20" :gutterHeight="20" >
      <template v-for="item,index in imgsArr">
        <WaterfallItem :key="index" :width="240" :order="index" >
          <div class="waterfall-item-list ivu-card">
            <img :src="item.src" >
            <i class="waterfall-item-button ivu-icon ivu-icon-close-circled" style="font-size: 18px;color:rgb(249, 47, 125);" @click="removeImg(index)"></i>
            <p>
              {{item.text}}
            </p>
          </div>
          
        </WaterfallItem>
      </template>
    </Waterfall>
    </div>
  </div>
</template>
<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
import {Waterfall, WaterfallItem} from 'vue2-waterfall';
export default {
	name: 'ThePhoto',
	components: {
    Waterfall,
    WaterfallItem
	},
  props:["id"],
	data () {
		return {
      photoAlbum:{},
      modal:false,
    }
  },
  created(){
  	this.initPhotoAlbum(this.id);
  },
  mouted(){
  },
  watch:{
    '$route' (to, from) {
      this.initPhotoAlbum(to.params.id);
    }
  },
  computed: {
  	imgClassify:function(){
  		return this.$store.state.base.navArr.filter(function(item){
        return item.type == 'index/photo/index' && item.status > 0;
      });
  	},
    imgsArr:function(){
      let arr=this.photoAlbum.imgall||[]
      return arr;
    }

  },
  methods: {
    //初始像册
  	initPhotoAlbum:function(id){
  		this.$http.get('photos/Photoalbum?id='+id)
      .then((response)=>{
        this.photoAlbum=response.data;
      });
  	},
    //根据ID返回名称
    returnClassify:function(id){
      let index = this.imgClassify.findIndex((item)=>{
        return item.id == id;
      });
      let obj=this.imgClassify[index]||{title:"没有分类"}
      return obj.title;
    },
    //插入主图
    returnimg:function(url){
      this.photoAlbum.titleimg=url;
    },
    //插入返回图片
    returnimgarr:function(arr){
      this.photoAlbum.imgall=this.photoAlbum.imgall||[]
      arr.forEach((item)=>{
        let imgArr={
          src:item.imgurl,text:item.imgname
        }
        this.photoAlbum.imgall.push(imgArr);
      });
    },
    //修改像册
    changePhoto:function(){
      this.$http({
        url:"photos/changePhotos",
        method:"post",
        data:this.photoAlbum,
      })
      .then((response)=>{
        this.photoAlbum=response.data;
        this.modal=false;
        this.$Message.info('修改成功');
      })
    },
    //删除图片
    removeImg:function(index){
      this.photoAlbum.imgall.splice(index,1)
    },
    
	}
}
</script>
<style >
  .photo-album-header{
    padding: 1rem;
    margin-bottom: 1rem;    
  }
  .waterfall-item-list{
    border: 1px solid #dddee1;
  }
  .waterfall-item-list img{
    width: 100%;
    display: block;
    border-radius: 5px;
  }
  .waterfall-item-list span{
    
  }
  .waterfall-item-button{
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
  }
</style>